<template>
    <div class="container">
        <el-form label-width="130px">
            <el-form-item label="标题标题：">
                <el-input maxlength="4" v-model="list.title1" placeholder="请输入四个字标题" @change="handList"></el-input>
            </el-form-item>
            <el-form-item label="标题颜色：">
                <el-color-picker @change="handList" v-model="list.titlecolor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="秒杀内容：">
                <el-input v-model="list.content1" placeholder="请输入秒杀内容" @change="handList"></el-input>
            </el-form-item>
            <el-form-item label="秒杀内容颜色：">
                <el-color-picker @change="handList" v-model="list.contentcolor1" show-alpha></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="标题2标题：">
                <el-input maxlength="4" v-model="list.title2" placeholder="请输入四个字标题" @change="handList"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="多少人参与：">
                <el-input maxlength="4" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                    v-model="list.participate" placeholder="" @change="handList"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="秒杀2内容：">
                <el-input v-model="list.content2" placeholder="请输入秒杀内容" @change="handList"></el-input>
            </el-form-item>
            <el-form-item label="秒杀12内容颜色：">
                <el-color-picker @change="handList" v-model="list.contentcolor2" show-alpha></el-color-picker>
            </el-form-item> -->
            <el-form-item label="是否开启倒计时：">
                <el-switch v-model="list.isTime" active-color="#13ce66" inactive-color="#ff4949"
                    @change="handList"></el-switch>

            </el-form-item>
            <el-form-item label="卡片背景颜色：">
                <el-color-picker @change="handList" v-model="list.cardBgColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="是否显示商品名称：">
                <el-radio v-model="list.showTitle" label="1">是</el-radio>
                <el-radio v-model="list.showTitle" label="2">否</el-radio>
            </el-form-item>
            <div class="center" v-if="list.isTime"> <el-date-picker @change="handList" v-model="list.Time"
                    type="datetime" placeholder="选择倒计时时间"></el-date-picker></div>

            <el-form-item label="是否开启划线价：">
                <el-switch @change="handList" v-model="list.price" active-color="#13ce66"
                    inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label="秒杀价颜色:">
                <el-color-picker @change="handList" v-model="list.color" show-alpha></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="链接:">
                <div>
                    <el-tooltip effect="dark" :content="list.link" placement="top" v-if="list.link">
                        <span class="text" @click="() => show = true">{{
                            list.link
                            }}</span>
                    </el-tooltip>
                    <span v-else @click="() => show = true" class="link">请输入跳转链接</span>
                </div>
            </el-form-item> -->
        </el-form>
        <el-dialog title="请选择跳转链接" :visible.sync="show" @close="close" :destroy-on-close="true">
            <RoutLink :link="list.link" @selpage="selpage"></RoutLink>
        </el-dialog>
    </div>
</template>
<script>
import RoutLink from "@/components/RoutLink/RoutLink.vue"

export default {
    name: "InstantDeath",
    components: { RoutLink },
    props: {
        data: {
            type: Object,
            default: () => { },
        },
    },

    watch: {

    },

    data() {
        return {
            show: false,

            list: {
                title1: "",
                title2: "",
                content1: '',
                participate: '',
                content2: '',
                isTime: true,
                Time: "",
                price: true,
                color: "",
            },
        }
    },
    mounted() {
        this.list = this.data
    },
    methods: {
        handList(e) {
            this.$emit("change", this.list)
        },
        close() {
            this.show = false;

        },
        selpage(e) {
            this.list.link = e
            this.show = false;
        }
    }
};
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
}

.center {
    display: flex;
    justify-content: flex-end;
}

.link {
    color: #1b8bff;
    cursor: pointer;
}

.text {
    white-space: nowrap;
    text-align: -webkit-auto;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>